<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
	<!--	[[1]]	# Kinect App Site title #		-->
    <title>Kinect App Site</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!--	[[2]]	# Kinect App description & author #		-->
    <meta name="description" content="">
    <meta name="author" content="">

    <link href="files/css/bootstrap.css" rel="stylesheet">
	<link href="files/css/jquery.tweet.css" rel="stylesheet">
    <style type="text/css">
      body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
    </style>
    <link href="files/css/bootstrap-responsive.css" rel="stylesheet">
	<link rel="shortcut icon" href="img/ico/favicon.ico">
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>

  <body>

    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
		  <!--	[[3]]	# Kinect App name #		-->
          <a class="brand" href="#">Kinect App name</a>
          <div class="nav-collapse">
            <ul class="nav">
              <li><a href="#about"><i class="icon-info-sign icon-white"></i>&nbsp;About</a></li>
              <li><a href="#features"><i class="icon-certificate icon-white"></i>&nbsp;Features</a></li>
			  <li><a href="#screens"><i class="icon-eye-open icon-white"></i>&nbsp;Screens</a></li>
			  <li><a href="#download"><i class="icon-download-alt icon-white"></i>&nbsp;Download</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <div class="container">

      <div class="hero-unit">
	  <!--	[[4]]	# Kinect App name #		-->
        <h1>Kinect App name</h1>
		<div class="row">
			<div class="span5">
			<!--	[[5]]	# Kinect App slogan #		-->
				<p>This is a template for website about Kinect enabled application. It includes a large callout where you can place some text about your app. Use it for introducing visitors about app.</p>
			</div>
			<div class="span5">
				<img src="img/kinect.jpg" alt="Kinect sensor"/>
			</div>
		</div>
      </div>
	  
	  <div class="row">
        <div class="span6">
		
          <h2>About</h2>
		  <a name="about"></a>
		  <!--	[[6]]	# Kinect App about section #		-->
           <p>Write here some sentences about your app. When you can use it and why it is special and worth to install on visitors machine.</p>
		   <p>Sample text.</p>

          <h2>Features</h2>
		  <a name="features"></a>
		  <!--	[[7]]	# Kinect App features #		-->
		   <ul>
			   <li>feature one</li>
			   <li>feature two</li>
			   <li>feature three</li>
			   <li>feature four</li>
		   </ul>
       </div>
	   <div class="span6">
          <h2>Videos</h2>
		  <a name="videos"></a>
		  <!--	[[8]]	# Kinect App some Youtube video #		-->
		  <iframe width="460" height="315" src="http://www.youtube.com/embed/T_QLguHvACs" frameborder="0" allowfullscreen></iframe>
        </div>
      </div>
	  
	  <div class="row">
	  
		<div class="span6">
          <h2>Screens</h2>
		  <a name="screens"></a>
		  <div id="myCarousel" class="carousel slide">
            
			<div class="carousel-inner">
              <!--	[[9]]	# Kinect App screens #		-->
			  <div class="item active">
                <img src="img/screens/KinectDepthApp.jpg" alt="">
                <div class="carousel-caption">
                  <h4>KinectDepthApp</h4>
                  <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                </div>
              </div>
              
			  <div class="item">
                <img src="img/screens/KinectSkeletalApp.jpg" alt="">
                <div class="carousel-caption">
                  <h4>KinectSkeletalApp</h4>
                  <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                </div>
              </div>
              
			  <div class="item">
                <img src="img/screens/KinectXNA.jpg" alt="">
                <div class="carousel-caption">
                  <h4>KinectXNA</h4>
                  <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                </div>
              </div>
            </div>
            <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>
            <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>
          </div>
        </div>
		
		<div class="span6">
          <h2>Latest</h2>
		  <a name="latest"></a>
           <p class="tweet"></p>
        </div>

	 </div>
	 
	 <div class="row">
		 <div class="span12 well">
			<h2>Download</h2>
			<!--	[[10]]	# Kinect App Download #		-->
			  <p>
				<a name="download" class="btn btn-info btn-small" href="#"><i class="icon-download-alt icon-white"></i>&nbsp;Source code</a>
				<a name="download" class="btn btn-info btn-small" href="#"><i class="icon-download-alt icon-white"></i>&nbsp;Binary</a>
			  </p>
		  </div>
	 </div>
	  
      <hr>

      <footer>
	  <!--	[[11]]	# Kinect App author #		-->
        <p>&copy; Author name</p>
		<p><a href="http://kinectappsite.codeplex.com/">Kinect App Site</a> by <a href="http://tomek.kownet.info">Tomasz Kowalczyk</a></p>
      </footer>

    </div> 

    <script src="files/js/jquery.js"></script>
    <script src="files/js/bootstrap-transition.js"></script>
    <script src="files/js/bootstrap-alert.js"></script>
    <script src="files/js/bootstrap-modal.js"></script>
    <script src="files/js/bootstrap-dropdown.js"></script>
    <script src="files/js/bootstrap-scrollspy.js"></script>
    <script src="files/js/bootstrap-tab.js"></script>
    <script src="files/js/bootstrap-tooltip.js"></script>
    <script src="files/js/bootstrap-popover.js"></script>
    <script src="files/js/bootstrap-button.js"></script>
    <script src="files/js/bootstrap-collapse.js"></script>
    <script src="files/js/bootstrap-carousel.js"></script>
    <script src="files/js/bootstrap-typeahead.js"></script>
	<script src="files/js/jquery.tweet.js" ></script>
	<!--	[[12]]	# Kinect App twitter feed #		-->
	<script type='text/javascript'>
    jQuery(function($){
        $(".tweet").tweet({
            query: "#kinect",
            join_text: "auto",
            avatar_size: 32,
            count: 4,
            auto_join_text_default: "we said,", 
            auto_join_text_ed: "we",
            auto_join_text_ing: "we were",
            auto_join_text_reply: "we replied to",
            auto_join_text_url: "we were checking out",
            loading_text: "loading tweets..."
        });
    });
	</script>
  </body>
</html>
